<template>
  <el-row class="details fff">
    <el-row>
      <el-form
        ref="addForm"
        :inline="true"
        :rules="rules"
        :model="addForm"
        label-position="top"
        class="search"
      >
        <el-row>
          <el-col :span="6">
            <el-form-item label="货品编号" prop="code">
              <el-input v-model="addForm.code" disabled placeholder="请输入" />
            </el-form-item>
          </el-col>
          <el-col :span="6">
            <el-form-item label="货品类型" prop="goodsTypeName">
              <el-autocomplete
                v-model="addForm.goodsTypeName"
                :fetch-suggestions="queryGoodsType"
                suffix-icon="el-icon-search"
                placeholder="请输入"
                @select="handleGoodsTypeSelect"
              />
            </el-form-item>
          </el-col>
          <el-col :span="6">
            <el-form-item label="货品名称" prop="name">
              <el-input
                v-model="addForm.name"
                placeholder="请输入"
                :clearable="true"
              />
            </el-form-item>
          </el-col>
          <el-col :span="6">
            <el-form-item label="货品条码" prop="barCode">
              <el-input
                v-model="addForm.barCode"
                placeholder="请输入"
                :clearable="true"
              />
            </el-form-item>
          </el-col>
        </el-row>
        <el-row>
          <el-col :span="6">
            <el-form-item label="货主" prop="ownerName">
              <el-autocomplete
                v-model="addForm.ownerName"
                :fetch-suggestions="queryOwner"
                suffix-icon="el-icon-search"
                placeholder="请输入"
                @select="handleOwnerSelect"
              />
            </el-form-item>
          </el-col>
          <el-col :span="6">
            <el-form-item label="质检方式" prop="inspectionType">
              <el-select
                v-model="addForm.inspectionType"
                placeholder="请选择"
                clearable
              >
                <el-option
                  v-for="(item, index) in inspectionType"
                  :key="index"
                  :label="item.label"
                  :value="item.value"
                />
              </el-select>
            </el-form-item>
          </el-col>
          <el-col :span="6">
            <el-form-item label="温度要求" prop="temperatureType">
              <el-select
                v-model="addForm.temperatureType"
                placeholder="请选择"
                clearable
              >
                <el-option
                  v-for="(item, index) in temperatureType"
                  :key="index"
                  :label="item.label"
                  :value="item.value"
                />
              </el-select>
            </el-form-item>
          </el-col>
          <el-col :span="6">
            <el-form-item label="承重类型" prop="bearingType">
              <el-select
                v-model="addForm.bearingType"
                placeholder="请选择"
                clearable
              >
                <el-option
                  v-for="(item, index) in bearingType"
                  :key="index"
                  :label="item.label"
                  :value="item.value"
                />
              </el-select>
            </el-form-item>
          </el-col>
        </el-row>
        <el-row>
          <el-col :span="6">
            <el-form-item label="体积" prop="volume" class="formInfoTip">
              <el-input
                v-model="addForm.volume"
                type="number"
                placeholder="请输入"
                :clearable="true"
              ><template slot="append">m³</template></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="6">
            <el-form-item label="指定库区">
              <el-select
                v-model="addForm.areaId"
                placeholder="请选择"
                clearable
              >
                <el-option
                  v-for="(item, index) in warehouseType"
                  :key="index"
                  :label="item.name"
                  :value="item.id"
                />
              </el-select>
            </el-form-item>
          </el-col>
          <el-col :span="6">
            <el-form-item label="单价" class="formInfoTip">
              <el-input
                v-model="addForm.price"
                type="number"
                placeholder="请输入"
                :clearable="true"
              ><template slot="append">元</template></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="6">
            <el-form-item label="单位">
              <el-input
                v-model="addForm.unit"
                placeholder="请输入"
                :clearable="true"
              />
            </el-form-item>
          </el-col>
        </el-row>
        <el-row>
          <el-col :span="6">
            <el-form-item label="保质天数" class="formInfoTip">
              <el-input
                v-model="addForm.guaranteeDay"
                type="number"
                placeholder="请输入"
                :clearable="true"
              ><template slot="append">天</template></el-input>
            </el-form-item>
          </el-col>
        </el-row>
      </el-form></el-row>

    <el-row class="submit">
      <el-button
        @click="$router.push('/manage-base-info/goods')"
      >返回</el-button>
      <el-button type="primary" @click="onSubmit">提交</el-button>
    </el-row>
  </el-row>
</template>

<script>
import { temperatureType, bearingType } from '@/constant/area'
import { inspectionType } from '@/constant/goods'
import { nextCodeFactory } from '@/api/codeFactory'
import { getAllAreaList } from '@/api/area'
import { vagueGoodsType } from '@/api/goodsType'
import { vagueOwner } from '@/api/owner'
import { addGoods, setGoods, queryGoods } from '@/api/goods'
export default {
  data() {
    const goodsTypeRule = async(rule, value, cb) => {
      if (!this.addForm.goodsTypeId) {
        cb(new Error('请输入'))
      } else {
        cb()
      }
    }
    const ownerRule = async(rule, value, cb) => {
      if (!this.addForm.ownerId) {
        cb(new Error('请输入'))
      } else {
        cb()
      }
    }
    return {
      goodsTypeList: [],
      ownerList: [],
      inspectionType,
      temperatureType,
      bearingType,
      warehouseType: null,
      addForm: {
        areaId: null,
        barCode: null,
        bearingType: null,
        code: null,
        goodsTypeId: null,
        goodsTypeName: null,
        guaranteeDay: null,
        inspectionType: null,
        name: null,
        ownerId: null,
        ownerName: null,
        price: null,
        temperatureType: null,
        unit: null,
        volume: null
      },
      rules: {
        name: {
          required: true,
          max: 10,
          message: '请输入',
          trigger: 'blur'
        },
        goodsTypeName: [{
          required: true,
          message: '请输入'
        }, { trigger: 'change', message: '请输入', validator: goodsTypeRule }],
        ownerName: [{
          required: true,
          message: '请输入'
        }, { trigger: 'change', message: '请输入', validator: ownerRule }],
        barCode: {
          required: true,
          message: '请输入',
          trigger: 'blur'
        },
        bearingType: {
          required: true,
          message: '请选择',
          trigger: 'blur'
        },
        code: { required: true, message: '请输入', trigger: 'blur' },
        volume: {
          required: true,
          message: '请输入',
          trigger: 'blur'
        },
        temperatureType: {
          required: true,
          message: '请选择',
          trigger: 'blur'
        },
        inspectionType: { required: true, message: '请选择', trigger: 'blur' }
      }
    }
  },
  watch: {
    async 'addForm.ownerId'(val) {
      if (val) {
        const { data } = await getAllAreaList({ ownerId: val })
        this.warehouseType = data
      } else {
        this.warehouseType = []
        this.areaId = ''
      }
    }
  },
  async created() {
    await this.vague()
    if (this.$route.params.id !== 'null') {
      const { data } = await queryGoods(this.$route.params.id)
      this.addForm = data
      this.addForm.goodsTypeName = this.goodsTypeList.find(i => i.id === data.goodsTypeId).name
      this.addForm.ownerName = this.ownerList.find(i => i.id === data.ownerId).name
    } else {
      this.nextCodeFactory()
    }
  },
  methods: {
    async vague() {
      const data = await Promise.all([vagueGoodsType(''), vagueOwner('')])
      this.goodsTypeList = data[0].data
      this.ownerList = data[1].data
    },
    async queryGoodsType(val, cb) {
      const arr = this.goodsTypeList.map(i => {
        if (i.name.includes(val)) {
          return { value: i.name, label: i.id }
        }
      }).filter(i => i)
      cb(arr)
    },
    async queryOwner(val, cb) {
      const arr = this.ownerList.map(i => {
        if (i.name.includes(val)) {
          return { value: i.name, label: i.id }
        }
      }).filter(i => i)
      cb(arr)
    },
    handleGoodsTypeSelect(item) {
      this.addForm.goodsTypeName = item.value
      this.addForm.goodsTypeId = item.label
    },
    handleOwnerSelect(item) {
      this.addForm.ownerName = item.value
      this.addForm.ownerId = item.label
    },
    async nextCodeFactory() {
      const { data } = await nextCodeFactory('HP')
      this.addForm.code = data
    },
    onSubmit() {
      this.$refs.addForm.validate(async(valid) => {
        if (valid) {
          if (this.$route.params.id === 'null') {
            await addGoods(this.addForm)
            this.$message.success('新增成功')
          } else {
            await setGoods(this.addForm)
            this.$message.success('修改成功')
          }
          this.$router.push('/manage-base-info/goods')
        } else {
          this.$message.warning('请完善表单')
          return false
        }
      })
    }
  }
}
</script>

<style lang="scss" scoped>
.submit {
  border-top: 1px solid #f5efee;
  display: flex;
  justify-content: center;
  align-items: center;
  height: 80px;
  .el-button {
    width: 170px;
    margin: 20px;
  }
}
</style>
